import React, { memo } from 'react'
import { shallowEqual, useSelector } from 'react-redux'
import {
  PlaylistWrapper
} from './style'
import { formatImg } from '@/utils/format'
import useShowPlaylistDetail from '@/hooks/useShowPlaylistDetail'
export default memo(function SimiPlaylist() {
  const { simiPlaylists } = useSelector(state => ({
    simiPlaylists:state.getIn(['song','simiPlaylists'])
  }), shallowEqual)
  const goToPlaylistDetail = useShowPlaylistDetail()
  return (
    <PlaylistWrapper>
      <div className="header">
        包含这首歌的歌单
      </div>
      <div className="list">
        {
          simiPlaylists.map(item => {
            return (
              <div className="item" key={item.id}>
                <div className="left">
                  <img src={formatImg(item.coverImgUrl,50)} alt="" onClick={e => goToPlaylistDetail(item.id)}/>
                </div>
                <div className="right">
                  <div className="name text-nowrap" onClick={e => goToPlaylistDetail(item.id)}>{item.name}</div>
                  <div className="creator">by   {item.creator.nickname }</div>
                </div>
              </div>
            )
          })
        }
      </div>
    </PlaylistWrapper>
  )
})
